<!doctype html>
<html>
  <head>
    <title>AdBlock - Report a bug</title>
    <link rel="stylesheet" href="adblock-jquery-ui.custom.css" />
    <link rel="stylesheet" href="adblock-option-options.css" />
    <script src="lib/polyfills/promise.js"></script>
    <script src="lib/polyfills/fetch.js"></script>
    <script src="ext/common.js"></script>
    <script src="ext/content.js"></script>
    <script src="i18n.js" charset="utf-8"></script>
    <script src="adblock-jquery.js"></script>
    <script src="adblock-jquery-ui.custom.min.js"></script>
    <script src="adblock-functions.js"></script>
    <script src="adblock-option-bug-report.js"></script>
    <style type="text/css">
      body {
        background-color: white;
      }
      .section  {
        padding: 10px;
        padding-left: 162px;
        margin: 0px -8px 0px -8px;
        position: relative;
        margin: 0px auto;
        max-width: 1000px;
        display: none;
      }
      .white {
        background-color: white;
      }
      h2 {
        font-size: 1.2em;
        margin-left: 15px;
      }
      label {
        margin-right: 5px;
      }
      a {
        color: #4D7BD6;
        text-decoration: none;
      }
      .grey{
         background-color: #f8f8f8;
      }
      .inputError{
        border-color: #f00 !important;
      }
      .step {
        position: relative;
        margin: 0px auto;
        max-width: 1000px;
        padding: 10px 20px 10px 0px;
      }
      #info  {
        position: relative;
        margin: 110px auto 30px;
        max-width: 990px;
        padding: 10px 20px 10px 0px;
      }
      .missingInfoMessage{
        display: none;
        color: #f00
      }
      .redText{
        color: #f00
      }
      #name,#email{
        width: 350px;
      }
      #summary{
        width: 650px
      }
      @media screen and (max-width: 1080px) {
        .social {
          display: none;
        }
        .step {
          padding: 10px 20px 10px 0px;
        }
        #info {
          margin: 110px auto 30px 15px;
        }
      }
    </style>
  </head>
  <body>
    <header id="header">
      <div class="wrap">
        <nav id="main_nav" class="right">
          <ul>
          <li class="social"><a class="twitter" href="http://twitter.com/getadblock" target="_blank"></a></li>
          <li class="social"><a class="gplus" href="http://plus.google.com/100807459477993641578" target="_blank" ></a></li>
          <li class="social"><a class="facebook" href="http://facebook.com/heres.adblock" target="_blank" ></a></li>
          </ul>
        </nav>
        <a href="https://www.getadblock.com" class="left adblock-logo"><img src="icons/logo.png"  width="240" height="64"></a>
      </div>
    </header>
    <!--STEP 0-->
    <div id="info">Found a bug in AdBlock? Tell us about it and we'll investigate!</div>

    <!--Step 1: Name & Email -->
    <div class="step grey">
      <div class="section" style="display:block" id="step_name_email">
        <span class="missingInfoMessage">Required information is missing or invalid.  Please fill in the questions that have a red border.</span>
        <p class="redText">* Required</p>
        <label for="name">What's your name?<span class="redText">&nbsp;*</span></label><br/>
        <input type="text" id="name" /><br/><br/>
        <label for="email">What's your email address? (We'll only use this to contact you if we need more information)<span class="redText">&nbsp;*</span></label><br/>
        <input type="email" id="email" /><br/>
        <input type="checkbox" checked="true" id="rememberDetails" />
        <label for="rememberDetails">Remember my name and email for next time!</label><br/><br/>
        <label for="summary">Briefly describe the bug:<span class="redText">&nbsp;*</span></label><br/>
        <input type="text" id="summary" /><br/>
        <label for="repro-steps">If you can, tell us how it happened.  (Be specific, because we'll try to reproduce the bug on our systems)<span class="redText">&nbsp;*</span></label><br/>
        <textarea id="repro-steps" rows="5" cols="50">1.
2.
3. </textarea><br/>
        <label for="expected-result"> When you do this, what should happen?<span class="redText">&nbsp;*</span></label><br/>
        <textarea id="expected-result"  rows="5" cols="50"></textarea><br/>
        <label for="actual-result">What's happening instead?<span class="redText">&nbsp;*</span></label><br/>
        <textarea id="actual-result" rows="5" cols="50"></textarea><br/>
        <button id="step1-next">Next</button>
      </div>
    </div>

    <!-- Step 2: Final Checks -->
    <div class="step grey">
      <div class="section" id="step_final_questions">
        <label for="debug-info">The following information will be included in the bug report.</label>
        <textarea id="debug-info" rows="15" cols="80" disabled></textarea><br/>
        <button id="step2-back">Back</button>
        <button id="submit">Submit</button>
      </div>
    </div>

    <!-- Only show if response success -->
    <div class="step">
      <div class="section" id="step_response_success">
         <p>All set!  We'll be in touch soon, most likely within a day, two if it's a holiday. In the meantime, look for an email from AdBlock. You'll find a link to your ticket on our help site there. If you prefer to follow along by email, you can do that, too!</p>
      </div>
    </div>
    <!-- Only show if response error -->
    <div class="step">
      <div class="section" id="step_response_error">
        <p>There was an error processing your request.</p>
        <p id="step_response_error_msg"></p>
        <p>Please go to <a href="https://adblocksupport.freshdesk.com/support/tickets/new" target="_blank">our support website</a>.</p>
        <p>And manually create a ticket, and copy and paste the information below into the "Fill in any details you think will help us understand your issue" section</p>
        <textarea id="manual_submission" rows="25" cols="80"></textarea>
      </div>
    </div>
  </body>
</html>
